import React from 'react';

import {
	TouchableOpacity,
	Image,
	Text,
	StyleSheet,
	View,
} from 'react-native';

import { Drawer} from 'antd-mobile';


import Common from '../common/constants';



export default class SearchHeader extends React.Component {

	render(){

		return (
			<View style={styles.header}>
				<TouchableOpacity 
					onPress={this.props.cityAction}
				>
					<Text style={styles.city}> {this.props.city} </Text>
				</TouchableOpacity>
				<TouchableOpacity 
					style={styles.searchInput}
					onPress={this.props.searchAction}
				>
					<Image
	                    style={styles.searchIcon}
	                    source={require('../imgs/search.png')}
	                />
	                <Text style={styles.searchPlaceholder}>默认搜索...</Text>
				</TouchableOpacity>


			</View>
		);

	}
}


const styles = StyleSheet.create({
	header : {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
        backgroundColor: 'white',
        borderBottomColor: '#ccc',
        borderBottomWidth: 0.5,
	},
	searchInput : {
		flexDirection: 'row',
		padding: 10,
		alignItems: 'center',
		height: 32,
		margin: 6,
        backgroundColor: 'rgb(245, 246, 247)',
        borderRadius: 4,
        width: Common.window.width - 10 - 80,
	},
	searchIcon : {
		width: 20,
        height: 20,
	},
	searchPlaceholder : {
		marginLeft: 10,
        textAlign: 'center',
		fontSize: 15,
        color: 'gray'
	},

	city : {
		width : 80,
		textAlign : 'center',
	}
});